<template>
  <div class="component-root-container">
    <el-header>
      <el-form
        ref="contractRule"
        :rules="contractRule"
        :model="headerCheck"
        label-width="120px"
        label-position="right"
      >
        <el-row >
          <el-col :span="8">
            <el-form-item
              label="订单编号:"
              prop="requestId">
              <el-input
                v-model="headerCheck['requestId']"
                placeholder="请输入订单编号"
				        @input="change($event)"
                clearable/>
            </el-form-item>
          </el-col>
          <el-col :span="8" class="col_button">
            <div class="button">
            <el-button class="query" @click="buttonClick">查询</el-button>
            <el-button class="query" @click="reset">重置</el-button>
            </div>
          </el-col>
        </el-row>
      </el-form>
    </el-header>
    <el-main>
		<div class="contentInfo" style="margin-bottom:20px;" v-show="showSence">
			<el-row>
			  <el-col class="header-title">
				<span class="header-vertical"/>
				场景使用情况
			  </el-col>
			</el-row>
			<el-row>
				<div class="inline">
					<div><span>调用次数/日：</span><span>{{ query.count }}</span></div>
					<div><span>拦截比率：</span><span>{{ query.rate }}</span></div>
					<div><a class="link" href="javascript:;" @click="$router.push({name:'biz-ml'})">详情</a></div>
				</div>
			</el-row>
		</div>
		<div class="contentInfo" style="margin-bottom:20px;" v-show="sceneThat">
			<el-row>
			  <el-col class="header-title">
				<span class="header-vertical"/>
				场景说明
			  </el-col>
			</el-row>
			<el-row>
				<div class="page-tip">
					<div class="description">在进行集中操作服务终止时,检查该订单编号对应站址下统站址停服状态信息,若站址维护状态为在网有效,同时运维监控系统该站址FSU注册状态处于离线状态,则认为是长期无法服务导致的系统终止。</div>
				</div>
        <div class="page-tip">
          <div class="params-tip"><span>示例参数</span>：订单编号：1218052501183664</div>
        </div>
			</el-row>
		</div>

    <div class="contentInfo">
      <el-row>
        <el-col class="header-title">
          <span class="header-vertical" />
          校验返回信息
        </el-col>
      </el-row>
      <el-row>
        <div class="page-tip">
          <div class="description">
            <div v-show="notAvailable.requestId">订单编号: {{notAvailable.requestId}} </div>
            <el-row v-show="notAvailable.returnMsg">
              <el-col>{{notAvailable.returnMsg || ""}}</el-col>
            </el-row>
          </div>
        </div>
      </el-row>
    </div>
    </el-main>
  </div>
</template>

<script>
export default {
  data () {
    return {
      listLoading: false,
      showSence: true,
      sceneThat: true,
      query:{
        count:0,
        rate:'--'
      },
	    headerCheck: {
        requestId: ''
      },
      contractRule: {
        requestId: [
          { required: true, message: '请输入订单编号', trigger: 'blur' }
        ]
      },
      hiddenTableHeader: false,
      notAvailable: {
        requestId: '',
        returnMsg: ''
      }, // 查询接口返回的检验信息
    }
  },
  created () {
    this.queryPageCount('2.13');
  },
  mounted () {},
  methods: {
    async buttonClick () {
      this.listLoading = true
      try {
        await this.$refs['contractRule'].validate()
        const data = {
          requestId: this.headerCheck.requestId,
          serialNumber: '*',
          terminationReason: '*'
        }
        const r = await this.$http({
          url: this.$http.adornBizUrl('/service/available/notAvailable'),
          method: 'post',
          data: this.$http.adornData('param=' + JSON.stringify(data), false),
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
          }
        })
        if (r.data.data.length > 0) {
          this.notAvailable.requestId = r.data.data[0].requestId
          this.notAvailable.returnMsg = r.data.data[0].returnMsg || '';
        }
      } catch (e) {
        console.log(e)
		    this.listLoading = false
      } finally {
        this.listLoading = false
      }
    },
    reset () {
      this.headerCheck = {
        requestId: '',
      }
      this.notAvailable = {
        requestId: '',
        returnMsg: ''
      },
		  this.listLoading = false
		  this.$refs['contractRule'].clearValidate()
    },
    change(e){
      this.$forceUpdate()
    },
    async queryPageCount(scene) {
      try {
        const r = await this.$http({
          url: this.$http.adornBizUrl('/log/queryStatistics'),
          method: 'post',
          data: this.$http.adornData('param=' + JSON.stringify({scene:scene}), false),
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
          }
        })
        if(r.data.data && r.data.data.length >0){
          var result = r.data.data[0];
          this.query.count=result.cnt||'0';
          this.query.rate=(result.per==null?'--': (result.per*100).toFixed(1)+'%');
        }
      } catch (e) {
        console.log(e)
      } finally {
      }
    }
  }
}
</script>

<style scoped lang="scss">
  @import "../../../assets/scss/_formatQueryPage";
  @include formatQueryPage(0, 60%, left);
  .el-input {
    width: 60%;
  }

  .query {
    color:rgba(255,255,255,1);
    background:rgba(235,75,75,1);
    border-radius: 6px;
  }

  .table-bottom {
    margin-bottom: 15px;
  }

  div.inline{
    border:1px solid #e7e7e7;
    height:40px;
    line-height:40px;
    padding:0 10px;
  }
  .inline > div{
    width:200px;
	  display:inline-block;
  }
  a.link{
    color:rgba(235,75,75,1);
    font-weight:550;
  }
</style>
